<template>
  <a-list :bordered="false">
    <a-list-item v-for="item in roleList" :key="item.role_id">
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>
            <a-tag color="blue">{{ item.role_name }}</a-tag>
          </a-typography-paragraph>
        </template>
        <!-- <template #description>
          <div class="content">
            <a-typography-paragraph>
              77
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link>
             88
            </a-link>
          </div>
        </template> -->
      </a-list-item-meta>
    </a-list-item>
  </a-list>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store';
const { user } = useUserStore()
const roleList = user.role_list //角色列表

</script>

<style scoped lang="less">
:deep(.arco-list-item) {
  border-bottom: none !important;
  .arco-typography {
    margin-bottom: 20px;
  }
  .arco-list-item-meta-avatar {
    margin-bottom: 1px;
  }
  .arco-list-item-meta {
    padding: 0;
  }
}
:deep(.arco-list-item-meta-content) {
  flex: 1;
  border-bottom: 1px solid var(--color-neutral-3);

  .arco-list-item-meta-description {
    display: flex;
    flex-flow: row;
    justify-content: space-between;

    .tip {
      color: rgb(var(--gray-6));
    }
    .operation {
      margin-right: 6px;
    }
  }
}
</style>
